

	<page-title ng-if="layoutOptions.pageTitles" title="Buttons" description="Buttons with dropdowns and their variants"></page-title>


<div class="row">
	<div class="col-sm-12">
		
		<div class="panel panel-default">
			<div class="panel-heading">Button Colors</div>
			<div class="panel-body">
				
				<button class="btn btn-primary">Primary</button>
				<button class="btn btn-secondary">Secondary</button>
				<button class="btn btn-purple">Purple</button>
				<button class="btn btn-orange">Orange</button>
				<button class="btn btn-pink">Pink</button>
				<button class="btn btn-turquoise">Turquoise</button>
				<button class="btn btn-success">Green</button>
				<button class="btn btn-info">Light Blue</button>
				<button class="btn btn-blue">Blue</button>
				<button class="btn btn-danger">Red</button>
				<button class="btn btn-red">Dark Red</button>
				<button class="btn btn-warning">Yellow</button>
				<br />
				<button class="btn btn-black">Black</button>
				<button class="btn btn-white">White</button>
				<button class="btn btn-gray">Gray</button>
				<button class="btn btn-default">Default</button>
				
			</div>
		</div>
		
	</div>
</div>

<div class="row">
	<div class="col-sm-7">
		
		<div class="panel panel-default">
			<div class="panel-heading">Button Sizes</div>
			<div class="panel-body">
				
				<div class="vertical-top">					
					<button class="btn btn-primary btn-lg">Large button</button>
					<button class="btn btn-danger">Normal button</button>
					<button class="btn btn-success btn-sm">Small button</button>
					<button class="btn btn-blue btn-xs">Extra small button</button>
				</div>
				
			</div>
		</div>
		
	</div>
	<div class="col-sm-5">
		
		<div class="panel panel-default">
			<div class="panel-heading">Disabled State</div>
			<div class="panel-body">
				
				<div class="vertical-top">					
					<button class="btn btn-primary disabled">Primary</button>
					<button class="btn btn-secondary disabled">Secondary</button>
					<button class="btn btn-white disabled">White</button>
					<button class="btn btn-gray disabled">Gray</button>
				</div>
				
			</div>
		</div>
		
	</div>
</div>

<div class="row">
	
	<div class="col-md-12">
		
		
		<div class="panel panel-default">
			<div class="panel-heading">Icon Buttons</div>
			<div class="panel-body">
				
				<h4>Button Icon Variants</h4>
					
				<div class="vertical-top">
					
					<button class="btn btn-primary btn-icon">
						<i class="fa-link"></i>
						<span>Vist Website</span>
					</button>
					
					<button class="btn btn-success btn-icon">
						<i class="fa-check"></i>
						<span>Install Update</span>
					</button>
					
					<button class="btn btn-purple btn-icon">
						<span>Right Icon</span>
						<i class="fa-pencil"></i>
					</button>
					
					<button class="btn btn-red btn-icon btn-icon-standalone">
						<i class="fa-magic"></i>
						<span>Standalone</span>
					</button>
					
					<button class="btn btn-blue btn-icon btn-icon-standalone btn-icon-standalone-right">
						<i class="fa-plane"></i>
						<span>Standalone Right</span>
					</button>
					
				</div>
				
				<h4>Icons Example</h4>
				
				<div class="vertical-top">
					
					<button class="btn btn-secondary btn-icon">
						<i class="fa-heart"></i>
						<span>Like</span>
					</button>
					
					<button class="btn btn-blue btn-icon">
						<i class="fa-envelope-o"></i>
						<span>Share</span>
					</button>
					
					<button class="btn btn-warning btn-icon">
						<i class="fa-rocket"></i>
						<span>Launch</span>
					</button>
					
					<button class="btn btn-info btn-icon">
						<i class="fa-cloud"></i>
						<span>Cloud Hosting</span>
					</button>
					
					
					<button class="btn btn-white btn-icon">
						<span>Book Flight</span>
						<i class="fa-plane"></i>
					</button>
					
					<button class="btn btn-black btn-icon">
						<span>Raise Voice</span>
						<i class="fa-bullhorn"></i>
					</button>
					
					<button class="btn btn-purple btn-icon">
						<span>Donate Money</span>
						<i class="fa-money"></i>
					</button>
					
				</div>
				
				<h4>Standalone Icons Example</h4>
				
				<div class="vertical-top">
					
					<button class="btn btn-secondary btn-icon btn-icon-standalone">
						<i class="fa-print"></i>
						<span>Print Page</span>
					</button>
					
					<button class="btn btn-primary btn-icon btn-icon-standalone">
						<i class="fa-download"></i>
						<span>Download File</span>
					</button>
					
					<button class="btn btn-purple btn-icon btn-icon-standalone">
						<i class="fa-cog"></i>
						<span>Change Settings</span>
					</button>
					
					<button class="btn btn-white btn-icon btn-icon-standalone btn-icon-standalone-right">
						<i class="fa-arrows-alt"></i>
						<span>Set Dimensions</span>
					</button>
					
					<button class="btn btn-blue btn-icon btn-icon-standalone btn-icon-standalone-right">
						<i class="fa-search"></i>
						<span>Search Site</span>
					</button>
				
				</div>
				
				<h4>Icon Only Buttons</h4>
				
				<div class="vertical-top">
					<button class="btn btn-icon btn-blue">
						<i class="fa-fire"></i>
					</button>
					
					<button class="btn btn-icon btn-red">
						<i class="fa-remove"></i>
					</button>
					
					<button class="btn btn-icon btn-purple">
						<i class="fa-music"></i>
					</button>
					
					<button class="btn btn-icon btn-primary">
						<i class="fa-star"></i>
					</button>
					
					<button class="btn btn-icon btn-success">
						<i class="fa-thumbs-o-up"></i>
					</button>
					
					<button class="btn btn-icon btn-info">
						<i class="fa-keyboard-o"></i>
					</button>
					
					<button class="btn btn-icon btn-warning">
						<i class="fa-wrench"></i>
					</button>
				</div>
				
				<h4>Button Sizes</h4>
				
				<div class="vertical-top">
					<button class="btn btn-info btn-icon btn-icon-standalone btn-lg">
						<i class="fa-envelope"></i>
						<span>Large button</span>
					</button>
					
					<button class="btn btn-primary btn-icon btn-icon-standalone">
						<i class="fa-thumbs-up"></i>
						<span>Normal button</span>
					</button>
					
					<button class="btn btn-white btn-icon btn-icon-standalone btn-sm">
						<i class="fa-comment-o"></i>
						<span>Small button</span>
					</button>
					
					<button class="btn btn-purple btn-icon btn-icon-standalone btn-xs">
						<i class="fa-hand-o-right"></i>
						<span>Extra small button</span>
					</button>
				</div>
				
			</div>
		</div>
		
	</div>
	
</div>

<div class="row">
	<div class="col-sm-5">
		
		<div class="panel panel-default">
			<div class="panel-heading">Justified Size Buttons</div>
			<div class="panel-body">
				
				<div class="btn-group btn-group-justified">					
					<a type="button" class="btn btn-success bg-lg">Top</a>
				</div>
				
				<br />
				
				<div class="btn-group btn-group-justified">					
					<a type="button" class="btn btn-primary">Left</a>
					<a type="button" class="btn btn-red">Right</a>
				</div>
				
				<br />
				
				<div class="btn-group btn-group-justified">					
					<a type="button" class="btn btn-black btn-sm">Left</a>
					<a type="button" class="btn btn-purple btn-sm">Middle</a>
					<a type="button" class="btn btn-info btn-sm">Right</a>
				</div>
				
				<br />
				
				<div class="btn-group btn-group-justified">					
					<a type="button" class="btn btn-blue btn-xs">One</a>
					<a type="button" class="btn btn-success btn-xs">Two</a>
					<a type="button" class="btn btn-warning btn-xs">Three</a>
					<a type="button" class="btn btn-purple btn-xs">Four</a>
				</div>
				
			</div>
		</div>
		
	</div>
	
	<div class="col-sm-7">
		
		<div class="panel panel-default">
			<div class="panel-heading">Dropdown Buttons</div>
			<div class="panel-body">
				
				
				<div class="vertical-top">
					
					<h5>Dropdown Variants</h5>
				
					<div class="btn-group" dropdown>
						<button type="button" class="btn btn-blue dropdown-toggle" data-toggle="dropdown">
							Action <span class="caret"></span>
						</button>
						<ul class="dropdown-menu dropdown-blue" role="menu">
							<li>
								<a href="">Action</a>
							</li>
							<li>
								<a href="">Another action</a>
							</li>
							<li>
								<a href="">Something else here</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="">Separated link</a>
							</li>
						</ul>
					</div>
					
					<div class="btn-group" dropdown>
						<button type="button" class="btn btn-purple">Right Dropdown</button>
						<button type="button" class="btn btn-purple dropdown-toggle" data-toggle="dropdown">
							<i class="fa-info"></i>
						</button>
						
						<ul class="dropdown-menu" role="menu">
							<li>
								<a href="">Action</a>
							</li>
							<li>
								<a href="">Another action</a>
							</li>
							<li>
								<a href="">Something else here</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="">Separated link</a>
							</li>
						</ul>
					</div>
					
					<div class="btn-group left-dropdown" dropdown>
						<button type="button" class="btn btn-success">Left Dropdown</button>
						<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
							<span class="caret"></span>
						</button>
						
						<ul class="dropdown-menu dropdown-green" role="menu">
							<li>
								<a href="">Action</a>
							</li>
							<li>
								<a href="">Another action</a>
							</li>
							<li>
								<a href="">Something else here</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="">Separated link</a>
							</li>
						</ul>
					</div>
					
					<div class="btn-group" dropdown>
						<button type="button" class="btn btn-danger">Download</button>
						<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
							<i class="fa-download"></i>
						</button>
						
						<ul class="dropdown-menu dropdown-danger" role="menu">
							<li>
								<a href="">
									<i class="fa-beaker"></i>
									PSD Format
								</a>
							</li>
							<li>
								<a href="">
									<i class="fa-picture"></i>
									JPG Format
								</a>
							</li>
							<li>
								<a href="">
									<i class="fa-video"></i>
									GIF Format
								</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="">
									<i class="fa-menu"></i>
									Add to download list
								</a>
							</li>
						</ul>
					</div>
					
					<br />
					<br />
					
					<h5>Dropdown Styles</h5>
					
					<div class="btn-group" dropdown>
						<button type="button" class="btn btn-black">Primary</button>
						<button type="button" class="btn btn-black dropdown-toggle" data-toggle="dropdown">
							<i class="fa-star-o"></i>
						</button>
						
						<ul class="dropdown-menu dropdown-primary no-spacing" role="menu">
							<li>
								<a href="">Action</a>
							</li>
							<li>
								<a href="">Another action</a>
							</li>
							<li>
								<a href="">Something else here</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="">Separated link</a>
							</li>
						</ul>
					</div>
					
					<div class="btn-group" dropdown>
						<button type="button" class="btn btn-info">Retweet</button>
						<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
							<i class="fa-retweet"></i>
						</button>
						
						<ul class="dropdown-menu dropdown-info no-spacing" role="menu">
							<li>
								<a href="">Action</a>
							</li>
							<li>
								<a href="">Another action</a>
							</li>
							<li>
								<a href="">Something else here</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="">Separated link</a>
							</li>
						</ul>
					</div>
					
					<div class="btn-group" dropdown>
						<button type="button" class="btn btn-red">Pin this</button>
						<button type="button" class="btn btn-red dropdown-toggle" data-toggle="dropdown">
							<i class="fa-pinterest-square"></i>
						</button>
						
						<ul class="dropdown-menu dropdown-red no-spacing" role="menu">
							<li>
								<a href="">Action</a>
							</li>
							<li>
								<a href="">Another action</a>
							</li>
							<li>
								<a href="">Something else here</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="">Separated link</a>
							</li>
						</ul>
					</div>
					
					<div class="btn-group" dropdown>
						<button type="button" class="btn btn-warning">Share this</button>
						<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
							<i class="fa-share"></i>
						</button>
						
						<ul class="dropdown-menu dropdown-warning no-spacing" role="menu">
							<li>
								<a href="">Action</a>
							</li>
							<li>
								<a href="">Another action</a>
							</li>
							<li>
								<a href="">Something else here</a>
							</li>
							<li class="divider"></li>
							<li>
								<a href="">Separated link</a>
							</li>
						</ul>
					</div>
					
				</div>
				
			</div>
		</div>
	
	</div>
</div>

<div class="row">
	
	<div class="col-sm-9">
		
		<div class="panel panel-default">
			<div class="panel-heading">Grouped Buttons</div>
			<div class="panel-body">
				
				<div class="vertical-top">
						
					<h4>Simple Button Groups</h4>
					
					<div class="btn-group">
						<button type="button" class="btn btn-warning btn-lg">Left</button>
						<button type="button" class="btn btn-warning btn-lg">Middle</button>
						<button type="button" class="btn btn-warning btn-lg">Right</button>
					</div>
					
					<div class="btn-group">
						<button type="button" class="btn btn-purple">Left</button>
						<button type="button" class="btn btn-purple">Middle</button>
						<button type="button" class="btn btn-purple">Right</button>
					</div>
					
					<div class="btn-group">
						<button type="button" class="btn btn-red btn-sm">Left</button>
						<button type="button" class="btn btn-red btn-sm">Middle</button>
						<button type="button" class="btn btn-red btn-sm">Right</button>
					</div>
					
					<div class="btn-group">
						<button type="button" class="btn btn-info btn-xs">Left</button>
						<button type="button" class="btn btn-info btn-xs">Middle</button>
						<button type="button" class="btn btn-info btn-xs">Right</button>
					</div>
					
				</div>
					
			</div>
			
			<div class="panel-body">
				
				<h4>Toolbar Example</h4>
				
				<div class="vertical-top">
					<div class="btn-group" data-toggle="buttons">
						<label class="btn btn-white" ng-model="checkModel.left" btn-checkbox>Left</label>
						<label class="btn btn-white" ng-model="checkModel.middle" btn-checkbox>Middle</label>
						<label class="btn btn-white" ng-model="checkModel.right" btn-checkbox>Right</label>
					</div>
					
					<div class="btn-group" data-toggle="buttons">
												<label class="btn btn-white" ng-model="radioModel" btn-radio="'justify'">
							<i class="glyphicon glyphicon-align-justify"></i>
						</label>
						<label class="btn btn-white" ng-model="radioModel" btn-radio="'left'">
							<i class="glyphicon glyphicon-align-left"></i>
						</label>
						<label class="btn btn-white" ng-model="radioModel" btn-radio="'right'">
							<i class="glyphicon glyphicon-align-right"></i>
						</label>
						<label class="btn btn-white" ng-model="radioModel" btn-radio="'center'">
							<i class="glyphicon glyphicon-align-center"></i>
						</label>
											</div>
					
					<div class="btn-group" data-toggle="buttons">
												<label class="btn btn-white" ng-model="checkModel2.font" btn-checkbox>
							<i class="glyphicon glyphicon-font"></i>
						</label>
						<label class="btn btn-white" ng-model="checkModel2.italic" btn-checkbox>
							<i class="glyphicon glyphicon-italic"></i>
						</label>
						<label class="btn btn-white" ng-model="checkModel2.bold" btn-checkbox>
							<i class="glyphicon glyphicon-bold"></i>
						</label>
						<label class="btn btn-white" ng-model="checkModel2.width" btn-checkbox>
							<i class="glyphicon glyphicon-text-width"></i>
						</label>
											</div>
					
					<button type="button" data-loading-text="Loading..." class="btn btn-gray">
						Loading state
					</button>
				</div>
				
			</div>
		</div>
		
	</div>
	
	<div class="col-sm-3">
		
		<div class="panel panel-default">
			<div class="panel-heading">Block Buttons</div>
			<div class="panel-body">
				
				<div class="vertical-top">					
					<button class="btn btn-primary btn-block">Block button</button>
					<button class="btn btn-purple btn-block">Block button</button>
					<button class="btn btn-info btn-block">Block button</button>
					<button class="btn btn-white btn-block">Block button</button>
				</div>
				
			</div>
		</div>
		
	</div>
	
</div>